<template>
    <div class="xq" >
        <van-sticky :offset-top="0">
            <header>
                <span class="iconfont " @click="prev()">
                    <van-icon name="arrow-left" />
                </span>
                <p>
                    <span class="iconfont sp2"><van-icon name="like-o" @click="shoucang()"/></span>
                    <span class="iconfont sp3" @click="onSelect(option)"><van-icon name="share-o"  @click="showShare = true" />
                            <van-share-sheet
                            v-model="showShare"
                            title="立即分享给好友"
                            :options="options"
                            @select="onSelect"
                        />
                    </span>
                </p>
            </header>
        </van-sticky>
        
        <section>
            <img :src="cakeimage" alt="">
            <p class="ptitle">{{cakename}}</p>
            <div class="price-info">
                <span class="rmb">￥</span>
                <span class="now-price all-now-price">{{cakeprice}}</span>
                <span class="label" style="border:1px solid #F44236; color: #F44236;margin-top: -0.1rem;" @click="tsa()">专人配送</span>
                <span class="label" style="border:1px solid #F44236; color: #F44236;margin-top: -0.1rem;" @click="tsb()">门店自提</span>
                <div class="favo">
                    <span class="favoCount" @click="sc()">收藏</span>
                </div>
            </div>
            <div class="promise-layer">
                <span><i><van-icon name="passed" /></i>积分抵现</span>
                <span><i><van-icon name="passed" /></i>品质保障</span>
                <span><i><van-icon name="passed" /></i>正品保证</span>
                <span><i><van-icon name="passed" /></i>不支持7天无理由退货</span>
            </div>
            <div class="box">
                <p><span class="guige">规格</span>已选择直径15cm</p>
                <span class="icon iconfont icon-angle-right"></span>
            </div>
             <div class="box swan">
                <div >
                    <span class="guige"><van-icon name="points" /></span>
                    <span class="bao">
                        <span>商品来自</span><span class="black">黑天鹅</span><button>服务承诺</button>
                        <span class="txt">{{cakeoriginal}}</span>
                    </span>
                </div>
                <span class="icon iconfont icon-angle-right"></span>
            </div>
            <div class="box">
                <p><span class="guige">配送</span>北京市五环内免费配送</p>
                <span class="icon iconfont icon-angle-right"></span>
            </div>
            <div class="box">
                <p><span class="guige" >评价</span>综合评分<span style="color:red;margin-left:0.05rem;">{{scorenum}}</span></p>
                <span   @click="pj()">查看评价<span style="margin-left:0.1rem;" class="icon iconfont icon-angle-right"></span></span>
            </div>
             <div class="box midd">
                <p>图文详情</p>
            </div>
        </section>
        <main>
           
        </main>
        
        <footer>
            <div class="left">
                <img src="https://static.shengri.cn/uploads/image/gonglue/icon_ask.png" style="width:0.24rem;height:0.24rem;" alt="">
                <p>咨询</p>
            </div>
            <div class="right" >
                <button  @click="fun()">立即订购</button>
                <van-action-sheet v-model="show" title="标题">
                    <div class="content">
                        <van-sku
                            v-model="show"
                            :sku="sku"
                            :goods="goods"
                            :hide-stock="sku.hide_stock"
                            :message-config="messageConfig"
                            @buy-clicked="onBuyClicked"
                            @add-cart="onAddCartClicked"
                        />
                    </div>
                </van-action-sheet>
            </div>
        </footer>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
// import {postlink} from "@/api/postlink.js"
import {getlink} from "@/api/getlink.js"

export default {
    props:["cakeimage","cakename","cakeprice","cakeingredients","scorenum","cakeoriginal"
    ],
    data(){
         return {
            show: false,
            shows: false,
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
            sku: {
                tree: [
                    {
                    k: '颜色', // skuKeyName：规格类目名称
                    k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    v: [
                        {
                        id: '1', // skuValueId：规格值 id
                        name: '红色', // skuValueName：规格值名称
                        imgUrl: 'https://brup.shengri.cn/goods/2015/11/Fi7oKMS_XYceL3Urg9BmtzyVw6q9.jfif', // 规格类目图片，只有第一个规格类目可以定义图片
                        previewImgUrl: 'https://brup.shengri.cn/goods/2015/11/Fi7oKMS_XYceL3Urg9BmtzyVw6q9.jfif', // 用于预览显示的规格类目图片
                        },
                        // {
                        // id: '1',
                        // name: '蓝色',
                        // imgUrl: 'https://yys.res.netease.com/pc/fab/20210419142519/img/6_264_584b117d-5dae-4e93-8d70-7d14f784d807_908fe27.png',
                        // previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
                        // }
                        //https://yys.res.netease.com/pc/fab/20210419142519/img/6_264_45f8d306-e723-4f97-a445-972ec1a0e7fb_1d5b77c.png
                    ],
                    largeImageMode: true, //  是否展示大图模式
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                    id: 2259, // skuId
                    s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                    s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                    price: 100, // 价格（单位分）
                    stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '1.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                    // 商品留言
                    datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                    multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                    name: '留言', // 留言名称
                    type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                    required: '1', // 是否必填 '1' 表示必填
                    placeholder: '' // 可选值，占位文本
                    }
                ],
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
            // 默认商品 sku 缩略图
                picture: 'https://yys.res.netease.com/pc/fab/20210419142519/img/6_264_584b117d-5dae-4e93-8d70-7d14f784d807_908fe27.png'
            },
            messageConfig: {
                // 数据结构见下方文档
                // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
            uploadImg: () => {
                return new Promise((resolve) => {
                setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
                });
            },
            // 最大上传体积 (MB)
            uploadMaxSize: 3,
            // placeholder 配置
            placeholderMap: {
                text: 'xxx',
                tel: 'xxx',
                
            },
            // 初始留言信息
            // 键：留言 name
            // 值：留言内容
            initialMessages: {
                留言: '留言信息'
            }
            },
            skuData: {
                // 商品 id
                goodsId: '946755',
                // 留言信息
                messages: {
                    message_0: '12',
                    message_1: ''
                },
                // 另一种格式的留言，key 不同
                cartMessages: {
                    '留言1': 'xxxx'
                },
                // 选择的商品数量
                selectedNum: 1,
                // 选择的 sku 组合
                selectedSkuComb: {
                    id: 2257,
                    price: 100,
                    s1: '30349',
                    s2: '1193',
                    s3: '0',
                    stock_num: 111,
                    properties: [
                    {
                        k_id: 123,
                        k: '加料',
                        is_multiple: true,
                        v: [
                        {
                            id: 1223,
                            name: '椰果',
                            price: 1
                        }
                        ]
                    }
                    ],
                    property_price: 1
                },
            },
         }
     },
    methods:{
         fun() {
            this.show = true;
        },
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        prev(){
            this.$router.go(-1)
        },
        showPopup() {
            this.shows = true;
        },
        pj(){
            this.$router.push("/pj")
        },
        sc(){
            Dialog.alert({ title: '温馨提示',  message: '登录才能使用收藏功能！',  theme: 'round-button',}).then(() => {
             
                if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
                        this.$router.push("DAccountLogin");      
                }else{
                     console.log("发送请求")
                    //发送收藏请求
                    // this.$router.push("/Shopingcar");
                }
        });
        },
        shoucang(){
            Toast({
                message: '恭喜，收藏成功！',
                position: 'top',
            });
        },
        tsa(){
            Toast('专人配送');
        },
        tsb(){
            Toast('门店自取');
        },
        onBuyClicked(){
            //加入购物车
            console.log("立即购买")
            getlink("http://180.76.121.47:8008/shopping?goodsid=111&goodscount=11111' ").then((ok)=>{
                console.log(ok)
            })
        },
        onAddCartClicked(){
            //立即购买
            console.log("加入购物车")
            this.$router.push("/gwc")
        }
    },
     components: {
        [Dialog.Component.name]: Dialog.Component,
    },
}
</script>

<style scoped>
    .xqson{
        width: 100%;
        font-size: 0.12rem;
    }
    header{
        display: flex;
        justify-content: space-between;
        padding:0.05rem 0.1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background-color: rgba(0,0,0,0.3);
    }
    header span{
        width: 0.3rem;
        height: 0.3rem;
        font-size: 0.3rem;
        text-align: center;
        color: red;
        border-radius: 50%;
        margin: 0 0.05rem;
    }
    section img{
        width: 100%;
    }
    section p{
        padding: 0 0.1rem;
    }
    .ptitle{
        font-size: 0.18rem;
        font-weight: 400;
        border-top: 1px solid #ddd;
        padding-top: 0.1rem;
    }
    .ptxt{
        font-size: 0.14rem;
        color: rgb(180, 180, 180);
        text-align: left;
    }
    .price-info{
        border-bottom: 1px solid #ddd;
        padding-bottom: 0.1rem;
        margin-top: 0.1rem;
        margin-bottom: 0.2rem;
    }
    .rmb {
        color: #F44236;
    }
    .now-price {
        font-size: 0.24rem;
        color: #F44236;
        font-weight: bolder;
        margin-right: 0.1rem;
    }
    .label {
        display: inline-block;
        padding: 0.05rem 0.1rem;
        color: #fff;
        border-radius: 0.1rem;
        font-size: 0.12rem;
        line-height: 0.12rem;
        vertical-align: text-top;
        margin-right: 0.05rem;
    }
    .favo {
        font-size: 0.16em;
        color: #F44236;
        line-height: 0.24rem;
        padding: 0;
        float: right;
        box-sizing: border-box;
    }
    .favo .hreat {
        width: 0.22rem;
        height: 0.18rem;
        background-image: url("https://static.shengri.cn/uploads/image/shoucang/heart_e.png");
        background-size: cover;
        float: left;
        margin-top: .1rem;
        margin-right: .1rem;
    }
    .favoCount{
        font-size: 0.14rem;
        margin-right:0.1rem;
        vertical-align:middle;
        color: red;
    }
    .promise-layer{
        margin: 0.2rem auto;
        border-top: 1px solid #ddd;
        padding: 0.1rem 0;
        border-bottom: 1px solid #ddd;
    }
    .promise-layer>span{
        margin: 0 0.05rem;
    }
    .promise-layer>span>i{
        color: red;
        margin-right: 0.02rem;
    }
    .box{
        display: flex;
        justify-content: space-between;
        padding-top: 0 0.2rem;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0.2rem;
    }
    .box p{
        padding: 0.1rem 0.1rem;
        text-align: center;
    }
    .guige{
        display: block;
        margin-right: 0.1rem;
        color: rgb(150, 150, 150);
        float: left;
        font-size: 0.14rem;
        text-align: center;
        padding: 0.05rem;
        box-sizing: border-box;
    }
    .icon{
        text-align: center;
        font-size: 0.2rem;
        line-height: 0.4rem;
       color: rgb(150, 150, 150);
    }
    .black{
        font-size: 0.14rem;
        font-weight: bold;
    }
    .swan{
        padding: 0.1rem 0;
    }
    .swan button{
        outline: none;
        background-color: rgba(0,0,0,0);
        border: none;
        border: 1px solid #ddd;
        border-radius: 0.05rem;
        margin-left: 0.05rem;
    }
    .txt{
        display: block;
        color: rgb(150, 150, 150);
        position: relative;
        left: 0;
        text-align: left;
        margin-top: 0.05rem;
    }
    .bao{
        display: block;
        float: left;
    }
    .midd>p{
        text-align: center;
        margin: 0.1rem auto;
        color: rgb(150, 150, 150);
    }
    main{
        width: 100%;
        padding: 0.1rem;
        box-sizing: border-box;
    }
    main>img{
        width: 100%;
        vertical-align: middle;
    }
    footer{
        height:0.5rem;
        line-height: 0.5rem;
        padding-left: 0.1rem;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .left{
        width:20%;
        background-color: white;
    }
    .left>p{
        line-height: 0;
    }
    .right{
        width: 80%;
        background-color: red;
    }
    .right>button{
        border: none;
        outline: none;
        color: white;
        background-color: red;
        height: 100%;
        width: 100%;
    }
    .last{
        width: 100%;
    }
    .last>img{
        width: 100%;
    }
    .content {
        padding: 16px 16px 160px;
    }
</style>